<template>
  <div class="container">
    <h3>{{ newinfo.title }}</h3>
    <p>
      <span>发表时间：{{ newinfo.add_time | dateFormat("YYYY-DD-DD ") }} </span>
      <span>点击次数：{{ newinfo.click }} </span>
    </p>
    <hr />
    <div id="conten" v-html="newinfo.content"></div>
    <comment :newid="id"></comment>
    <!-- 这是评论子组件的位置 -->
  </div>
</template>


<script>

import comment from "../sub-components/comment.vue";
export default {
  data() {
    return {
      newinfo: [],
    };
  },
  methods: {
    async getnewinfo() {
      // console.log(id)
      const { data } = await this.$http.get("/api/getnew/" + this.id);
      // console.log(data)
      this.newinfo = data.message[0];
    },
  },
  created() {
    // console.log(this)
    this.getnewinfo();
  },
  components: {
    // 为这个组件增加子组件
    comment,
  },
  props: ["id"],
};
</script>


<style lang="scss" scoped>
p {
  padding-left: 5px;
  padding-right: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
h3 {
  font-size: 16px;
  text-align: center;
  color: red;
  margin: 15px 0;
}
.container {
  margin: 5px;
}
span {
  color: lightblue;
}
</style>